body{
  overflow: hidden;
}

#world{
  position: relative;
  border: 10px solid gray;
}
  .clear{
    clear: both;
  }
#viewport{
  overflow: hidden;
  background-color: #111;
  float: left;
}

.field{
  background-color: gray;
}

.grass{
  background-image: url(../images/guiproto/grass.png);
}

.river{
  background-image: url(../images/guiproto/water.png);
}

.rockObject{
  background-image: url(../images/guiproto/rock.png);
  z-index: 25;
  width: 50px;
  height: 50px;
  position: absolute;
}

.field.stone{
  background-image: url(../images/guiproto/stone.png);
}

.blockerObject{
  height: 50px;
  width: 50px;
  display: block;
  position: absolute;
}

.player{
  background-image: url(../images/guiproto/player-down.png);
  height: 50px;
  width: 50px;
  display: block;
  position: absolute;
}

/** streets **/
.streetv{
  background-image: url(../images/guiproto/street/vertical.png);
}
.streeth{
  background-image: url(../images/guiproto/street/horizontal.png);
}
.streettl{
  background-image: url(../images/guiproto/street/topleft.png);
}
.streettr{
  background-image: url(../images/guiproto/street/topright.png);
}
.streetbl{
  background-image: url(../images/guiproto/street/botleft.png);
}
.streetbr{
  background-image: url(../images/guiproto/street/botright.png);
}


/* Charstats */
#charstats{
  float: left;
  margin-left: 15px;
  width: 400px;
  background-color: #ccc;
  border-radius: 20px;
  padding: 20px;
}
  #charstats h2{
    font-family: "Cooper Std";
    font-size: 30px;
    color: #8d3d8e;
    margin:0;
    padding: 0;
  }
  
  #charstats .equipment{
    margin:0;
    padding: 0;
    list-style: none;
  }